<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
	<title>day03</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
	<script type="text/javascript" src="30days.js"></script>

	<style type="text/css">
	
		/* all 'li' children of 'ul' */
		ul.mylist li {
			color: black;
		}
		
		/* only the direct child */
		ul.mylist > li {
			color: red;
		}
		
		.first {
			color: green;
		}
		
		.horizontal {
			float:		left;
			list-style:	none;
			margin:		10px;
		}
		
		.special {
			border: '4px #00ff00 solid';
		}
		
	</style>
	
	<script type="text/javascript">	
		$(document).ready(function () {
			day03();
		});
	</script>
	
</head>



<body>

<h1>day 3 - the basics of querying the DOM</h1>

<p>paragrafo com algum texto</p>

<ul class="mylist">
	<li class="first">primeiro</li>
	<li>segundo</li>
	<li>terceiro</li>
	<li>quarto</li>
	<li>quinto</li>
	<li>sexto
		<ul>
			<li>dentro do sexto</li>
		</ul>
	</li>
	<li>setimo</li>
</ul>


<ul id="selected-plays">
	<li>Comedies
		<ul>
			<li>first</li>
			<li>secound</li>
		</ul>
	</li>
	<li>tragedies
		<ul>
			<li class="special">first</li>
			<li>secound</li>
		</ul>
	</li>
	<li>histories
		<ul>
			<li>first</li>
			<li>secound</li>
		</ul>
	</li>
</ul>

</body>

</html>